
#{extends 'template.html'/}

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>Rectangle Overlay</title> 
 
    <style type="text/css"> 
    
  
.pic
{
     margin-top:50px; 
     width:120px;
     margin-left:50px;
     margin-bottom:-60px;
}

.panel
{
    background-image:url("@{'/public/images/fundo perfil.jpg'}"); 
}

.name
{
    position:absolute;
    padding-left:200px;
    font-size:30px;
}

.dropdown
{
    position:absolute;
}

.change
{
 position:relative; 
 bottom:20px;
 padding:1px;
 color:white;
 text-decoration:none;
}


.change:hover
{
 text-decoration:none;
 background-color:black;
 color:white;
}	
      
    </style> 
 
   
  </head> 

<body>

 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
#{include 'main.html'/}


<div class="container">
	<div class="row well">
		<div class="col-md-2">
    	
        </div>
        <div class="col-md-12">
                <div class="panel">
                    <img class="pic img-circle" src="${user.usu_caminho_ima}" alt="...">
                    <div class="name"><small>${user.usu_nome_completo}</small></div>
                    <a href="#" class="btn btn-xs btn-primary pull-right" style="margin:10px;"><span class="glyphicon glyphicon-picture"></span> Alterar Capa</a>
                </div>
                
    <br><br><br>
    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#assignment" data-toggle="tab"><i class="fa fa-envelope-o"></i> Timeline</a></li>
      <li><a href="#sent" data-toggle="tab"><i class="fa fa-reply-all"></i> Sent</a></li>
      <li><a href="#inbox" data-toggle="tab"><i class="fa fa-file-text-o">Inbox</i> </a></li>
      <li><a href="#event" data-toggle="tab"><i class="fa fa-clock-o"></i> &{'biblioteca'}</a></li>
    </ul>
    
    <div class="tab-content">
     
      <div class="tab-pane active" id="assignment">
        <a href=""><div  id="largeData" style="float: left;width: 100%;"></div>
  
<script type="text/javascript">

    $(document).ready(function(e){
       
           $('#largeData').append("<div  ><br><img src='@{'/public/images/icone.png'}' width='50' height='60' style='border:2'   /> <h3> &{'postInicial'} </h3>  <center> <img src='@{'/public/images/rede.png'}' width='100%' height='580' style='border:2'  /> </center> <br><h4>&{'postPart2'} </h4> </div>"+ "pagina:");
       
    });
 var createAction = #{jsAction @listProjetos(':pro_titulo') /}
    $(window).paged_scroll({
        handleScroll:function (page,container,doneCallback) {
          if (page<${tamanho}){
     $.get(createAction({pro_titulo: page}), function(data) {
 $.each(data, function(index, item) {
            $('#largeData').append("<div  ><br><img src='"+item.pos_url+"'  width='50' height='60' style='border:2'  />" + item.pos_nome + "<center>"+item.pos_texto+"</center> <br></div>" +		
            		"pagina:" +  page);
            		  });
            });
             } else {
            $('#largeData').append("<div  ><h1>não possui mais posts para carregar</div></h1>");
           } 		
           
            //doneCallback();
                        return true;
        },
        // Uncomment to enable infinite scroll
        pagesToScroll : 4,
        triggerFromBottom:'50',
        loader:'<div class="loader"></div>',
        pagesToScroll: 120,
        debug  : true,
        targetElement : $('#largeData')
    });

</script>        
     </div>
       
      <div class="tab-pane" id="sent">
           <a type="button" data-toggle="collapse" data-target="#s1">
            <div class="btn-toolbar well well-sm" role="toolbar"  style="margin:0px;">
              <div class="btn-group"><input type="checkbox"></div>
              <div class="btn-group col-md-3">Noronha</div>
              <div class="btn-group col-md-8"><b>Msnsagem teste</b> <div class="pull-right"><i class="glyphicon glyphicon-time"></i> 12:30 AM</div> </div>
            </div>
        </a>
        <div id="s1" class="collapse out well">Msnsagem teste</div>
        <br>
        <button class="btn btn-primary btn-xs"><i class="fa fa-check-square-o"></i> Deletar Itens Selecionados</button>
      </div>
      
      
     <div class="tab-pane" id="inbox">
        <a type="button" data-toggle="collapse" data-target="#a1">
            <div class="btn-toolbar well well-sm" role="toolbar"  style="margin:0px;">
              <div class="btn-group"><input type="checkbox"></div>
              <div class="btn-group col-md-3">Odilio</div>
              <div class="btn-group col-md-8"><b>Msnsagem teste</b> <div class="pull-right"><i class="glyphicon glyphicon-time"></i> 12:10 PM <button class="btn btn-primary btn-xs" data-toggle="modal" data-target=".bs-example-modal-lg"><i class="fa fa-share-square-o"> Responder</i></button></div> </div>
            </div>
        </a>
        <div id="a1" class="collapse out well">Msnsagem teste</div>
        <br>
         <button class="btn btn-primary btn-xs"><i class="fa fa-check-square-o"></i> Deletar Itens Selecionados</button>
      </div>
     
     <div class="tab-pane" id="event">
       <div class="media">
                  <a class="pull-left" href="#">
                 
                   #{list items:lista, as:'product'}
                  

<a href="@{Livros.perfil(product)}">
<img src="${product.pro_imagem}" class="ccapa" width="70" height="103" title="O Alienista" alt="">          
</a>    
&nbsp;
#{/list}

    </a>
                 
            
    </div>
    
    
        
    </div>

     </div>
	</div>
    
    
</div>




<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content"><br/><br/>
            <form id="formpro" class="form-horizontal">
            <fieldset>
            <!-- Text input-->
            <div class="form-group">
              <label class="col-md-2 control-label" for="body">Body :</label>  
              <div class="col-md-8">
              <input id="body" name="body" type="text" placeholder="Message Body" class="form-control input-md">
                
              </div>
            </div>
            
            <!-- Textarea -->
            <div class="form-group">
              <label class="col-md-2 control-label" for="message">Message :</label>
              <div class="col-md-8">                     
                <textarea class="form-control" id="message" name="message"></textarea>
              </div>
            </div>
            
            <!-- Button -->
            <div class="form-group">
              <label class="col-md-2 control-label" for="send"></label>
              <div class="col-md-8">
                <button id="send" name="send" class="btn btn-primary">Send</button>
              </div>
            </div>
            
            </fieldset>
            </form>

    </div>
  </div>
</div>



<script type="text/javascript">
 
  
    
       

  $('#formpro').submit(function() {

  var createAction = #{jsAction @Timeline.enviarMensagem(':pro_titulo') /}

$.post(createAction({pro_titulo: $('#message').val()}), function(index, item) {


                 
    

});
$('#message').val('');
return false;
 });

 
    


</script>
</body>

